<template>
    <div class="calculate-factor-info">
        <el-row>
            <el-col :span="12" style="border-right: 1px solid #cacaca; height: calc(100vh - 100px); overflow: auto">
                <div class="left">
                    <div class="left-base">基础信息</div>
                    <div class="left-baseinfo">
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">因子编号：</div>
                            <div class="left-baseinfo-item-input">
                                <el-input
                                    size="mini"
                                    style="width: 100%"
                                    v-model="factor.entryCalculateFactorCode"
                                    placeholder="不手动输入、按原规则取"
                                    :disabled="operateType !== 'add'"
                                    maxlength="6"
                                />
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">因子名称：</div>
                            <div class="left-baseinfo-item-input">
                                <el-input size="mini" style="width: 100%" v-model="factor.entryCalculateFactorName" />
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">作用范围：</div>
                            <div class="left-baseinfo-item-input ">
                                <el-select
                                    class="levelSymbol-select"
                                    v-if="showLevelSymbol"
                                    size="mini"
                                    style="width: 100%"
                                    v-model="levelSymbolArr"
                                    multiple
                                    @focus="showRiskCalTypes"
                                >
                                    <el-option
                                        v-for="item in levelSymbolSelectData"
                                        :key="item.dictKey"
                                        :label="item.dictKeyName"
                                        :value="item.dictKey"
                                    >
                                    </el-option>
                                </el-select>

                                <el-checkbox-group v-else v-model="factor.riskCalTypes" @change="handleRiskCalTypesChange" class="check-box">
                                    <i class="el-icon-arrow-up" @click="showLevelSymbol = !showLevelSymbol"></i>
                                    <div style="display: flex;">
                                        <div class="left-baseinfo-item-label">产品</div>
                                        <el-checkbox label="1" style="margin-right: 5px">指令</el-checkbox>
                                        <el-checkbox label="0" style="margin-right: 5px">静态</el-checkbox>
                                        <el-checkbox label="2" style="margin-right: 5px">委托</el-checkbox>
                                    </div>
                                    <div style="display: flex;">
                                        <div class="left-baseinfo-item-label">资产单元</div>
                                        <el-checkbox label="4" style="margin-right: 5px">指令</el-checkbox>
                                        <el-checkbox label="3" style="margin-right: 5px">静态</el-checkbox>
                                        <el-checkbox label="5" style="margin-right: 5px">委托</el-checkbox>
                                    </div>
                                    <div style="display: flex;">
                                        <div class="left-baseinfo-item-label">投资组合</div>
                                        <el-checkbox label="7" style="margin-right: 5px">指令</el-checkbox>
                                        <el-checkbox label="6" style="margin-right: 5px">静态</el-checkbox>
                                        <el-checkbox label="8" style="margin-right: 5px">委托</el-checkbox>
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">风险类型：</div>
                            <div class="left-baseinfo-item-input">
                                <el-select
                                    size="mini"
                                    style="width: 100%"
                                    v-model="factor.entryTypes"
                                    placeholder="可多选"
                                    multiple
                                    collapse-tags
                                    clearable
                                >
                                    <el-option
                                        v-for="item in computedEntryTypesList"
                                        :key="item.dictKey"
                                        :label="item.dictKey + ' ' + item.dictKeyName"
                                        :value="item.dictKey"
                                    />
                                </el-select>
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">项目标识：</div>
                            <div class="left-baseinfo-item-input">
                                <el-select size="mini" style="width: 100%" v-model="factor.projectSymbol">
                                    <el-option value="0" label="0 产品" />
                                    <el-option value="1" label="1 项目" />
                                </el-select>
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">变动类型：</div>
                            <div class="left-baseinfo-item-input">
                                <el-select size="mini" style="width: 100%" v-model="factor.changeType">
                                    <el-option value="0" label="0 没有变动" />
                                    <el-option value="1" label="1 数据变动" />
                                    <el-option value="2" label="2 行情变动" />
                                </el-select>
                            </div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">计算单位：</div>
                            <div class="left-baseinfo-item-input"><el-input size="mini" style="width: 100%" v-model="factor.unit" /></div>
                        </div>
                        <div class="left-baseinfo-item">
                            <div class="left-baseinfo-item-label">额外补充：</div>
                            <div class="left-baseinfo-item-input">
                                <el-select size="mini" style="width: 100%" v-model="factor.extraSqlConfig">
                                    <el-option value="0" label="0 否" />
                                    <el-option value="1" label="1 是" />
                                </el-select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="other">
                    <div class="other-title">其他配置</div>
                    <div>
                        <el-tabs type="border-card" v-model="otherTableIndex">
                            <el-tab-pane name="1" label="相关计算配置">
                                <div class="other-tab other-tab1">
                                    <div class="other-tab1-hd">
                                        <span>种类</span>
                                        <span>是否相关</span>
                                        <span>
                                            <el-tooltip effect="dark" content="例如C_FUND_CODE;TB_FUND" placement="top-start">
                                                <span>指令配置<i class="el-icon-info"></i></span>
                                            </el-tooltip>
                                        </span>
                                        <span>
                                            <el-tooltip effect="dark" content="例如C_FUND_CODE;TB_SA_FUND" placement="top-start">
                                                <span>静态配置<i class="el-icon-info"></i></span>
                                            </el-tooltip>
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span>基金</span>
                                        <span>
                                            <el-select
                                                size="mini"
                                                @change="handleRelatedComputedConf($event, 'fundCfg')"
                                                v-model="factor.calculateRelationFund"
                                                style="width: 100%"
                                            >
                                                <el-option value="1" label="1 是"></el-option>
                                                <el-option value="0" label="0 否"></el-option>
                                            </el-select>
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" size="mini" v-model="otherConfig.relationFundConfigText" />
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" size="mini" v-model="otherConfig.staticRelationFundConfigText" />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span>证券</span>
                                        <span>
                                            <el-select
                                                size="mini"
                                                @change="handleRelatedComputedConf($event, 'stockCfg')"
                                                v-model="factor.calculateRelationStock"
                                                style="width: 100%"
                                            >
                                                <el-option value="1" label="1 是"></el-option>
                                                <el-option value="0" label="0 否"></el-option>
                                            </el-select>
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.relationStockConfigText" size="mini" />
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.staticRelationStockConfigText" size="mini" />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span>银行</span>
                                        <span>
                                            <el-select
                                                size="mini"
                                                @change="handleRelatedComputedConf($event, 'bankCfg')"
                                                v-model="factor.calculateRelationBank"
                                                style="width: 100%"
                                            >
                                                <el-option value="1" label="1 是"></el-option>
                                                <el-option value="0" label="0 否"></el-option>
                                            </el-select>
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.relationBankConfigText" size="mini" />
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.staticRelationBankConfigText" size="mini" />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span>
                                            <el-tooltip placement="top">
                                                <div slot="content">
                                                    指令配置: C_OPPONENT_CODE;TN_OPPONENT <br />
                                                    静态配置: C_OPPONENT_CODE;TN_SA_OPPONENT
                                                </div>
                                                <span>交易对手<i class="el-icon-info"></i></span>
                                            </el-tooltip>
                                        </span>
                                        <span>
                                            <el-select
                                                size="mini"
                                                @change="handleRelatedComputedConf($event, 'oppCfg')"
                                                v-model="factor.calculateRelationOpponent"
                                                style="width: 100%"
                                            >
                                                <el-option value="1" label="1 是"></el-option>
                                                <el-option value="0" label="0 否"></el-option>
                                            </el-select>
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.relationOpponentConfigText" size="mini" />
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.staticRelationOpponentConfigText" size="mini" />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span>穿透证券</span>
                                        <span>
                                            <el-select
                                                size="mini"
                                                @change="handleRelatedComputedConf($event, 'ptStockCfg')"
                                                v-model="factor.calculateRelationPtStock"
                                                style="width: 100%"
                                            >
                                                <el-option value="1" label="1 是"></el-option>
                                                <el-option value="0" label="0 否"></el-option>
                                            </el-select>
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.relationPtStockConfigText" size="mini" />
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.staticRelationPtStockConfigText" size="mini" />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span>穿透银行</span>
                                        <span>
                                            <el-select
                                                size="mini"
                                                @change="handleRelatedComputedConf($event, 'ptBankCfg')"
                                                v-model="factor.calculateRelationPtBank"
                                                style="width: 100%"
                                            >
                                                <el-option value="1" label="1 是"></el-option>
                                                <el-option value="0" label="0 否"></el-option>
                                            </el-select>
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.relationPtBankConfigText" size="mini" />
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.staticRelationPtBankConfigText" size="mini" />
                                        </span>
                                    </div>
                                    <div class="other-tab1-item">
                                        <span>衍生品</span>
                                        <span>
                                            <el-select
                                                size="mini"
                                                @change="handleRelatedComputedConf($event, 'derive')"
                                                v-model="factor.calculateRelationDerive"
                                                style="width: 100%"
                                            >
                                                <el-option value="1" label="1 是"></el-option>
                                                <el-option value="0" label="0 否"></el-option>
                                            </el-select>
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.relationDeriveConfigText" size="mini" />
                                        </span>
                                        <span>
                                            <el-input style="width: 100%" v-model="otherConfig.staticRelationDeriveConfigText" size="mini" />
                                        </span>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="2" label="统计配置">
                                <div class="other-tab other-tab2">
                                    <div class="other-tab2-hd">
                                        <div class="other-tab2-hd-label">
                                            <el-tooltip effect="dark" content="" placement="top-start">
                                                <div slot="content">
                                                    例如<br />
                                                    TI_INST_STOCK;N_MARKET_AMOUNT,N_DEAL_MARKET_AMOUNT;N_SERIAL_NO;C_STOCK_CODE,C_FUND_CODE,N_INST_NO
                                                </div>
                                                <span>配置说明<i class="el-icon-info"></i></span>
                                            </el-tooltip>
                                        </div>
                                        <div class="other-tab2-hd-input" style="text-align: right">
                                            <el-button type="text" @click="checkStatisticalConfSql">校验配置</el-button>
                                        </div>
                                    </div>
                                    <div class="other-tab2-item">
                                        <span class="other-tab2-item-label">日初统计配置：</span>
                                        <span class="other-tab2-item-input">
                                            <el-input type="textarea" v-model="otherConfig.earlyCalculateConfigText" style="width: 100%" />
                                        </span>
                                    </div>
                                    <div class="other-tab2-item">
                                        <span class="other-tab2-item-label">日中统计配置：</span>
                                        <span class="other-tab2-item-input">
                                            <el-input type="textarea" v-model="otherConfig.instructionCalculateConfigText" style="width: 100%" />
                                        </span>
                                    </div>
                                    <div class="other-tab2-item">
                                        <span class="other-tab2-item-label">静态统计配置：</span>
                                        <span class="other-tab2-item-input">
                                            <el-input type="textarea" v-model="otherConfig.staticCalculateConfigText" style="width: 100%" />
                                        </span>
                                    </div>
                                    <div class="other-tab2-item">
                                        <span class="other-tab2-item-label">委托统计配置：</span>
                                        <span class="other-tab2-item-input">
                                            <el-input type="textarea" v-model="otherConfig.entrustCalculateConfigText" style="width: 100%" />
                                        </span>
                                    </div>
                                    <div class="other-tab2-item">
                                        <span class="other-tab2-item-label" style="line-height: 1.5">关联存储过程：</span>
                                        <span class="other-tab2-item-input">
                                            <el-input size="mini" v-model="otherConfig.proceduresNameText" style="width: 100%" />
                                        </span>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="3" label="相关条目">
                                <div class="other-tab">
                                    <el-table :data="entry" size="mini" border height="calc(100vh - 430px)">
                                        <el-table-column
                                            label="条目编号"
                                            prop="entryCode"
                                            sortable
                                            width="120"
                                            show-overflow-tooltip
                                        ></el-table-column>
                                        <el-table-column label="风险说明" prop="entryName" show-overflow-tooltip></el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="4" label="相关原始范围配置">
                                <div class="other-tab other-tab4">
                                    <div>
                                        <span>关联原始范围</span>
                                        <el-button type="primary" @click="handleClickEditBound" size="mini" style="float: right">编辑</el-button>
                                    </div>
                                    <el-table :data="filterBoundRelationsList" size="mini" border height="calc(100vh - 455px)">
                                        <el-table-column label="范围类型" prop="boundType" width="120" show-overflow-tooltip>
                                            <template slot-scope="scope">
                                                {{ DictionConstUtil.BoundType[scope.row.boundType] }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="范围编码" prop="boundCode" show-overflow-tooltip>
                                            <template slot="header" slot-scope="scope">
                                                <span>{{ scope.column.label }}</span>
                                                <el-popover placement="bottom" width="160" trigger="click">
                                                    <div style="padding: 0 10px 10px 0">
                                                        <el-input v-model="searchBoundRelations" size="mini" clearable />
                                                    </div>
                                                    <i class="el-icon-search" slot="reference" style="cursor: pointer; float: right"></i>
                                                </el-popover>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="范围名称" prop="boundName" show-overflow-tooltip></el-table-column>
                                        <el-table-column min-width="200">
                                            <template #default="{ row }">
                                                <el-checkbox v-model="row.staticValid">静态</el-checkbox>
                                                <el-checkbox v-model="row.instValid">指令</el-checkbox>
                                                <el-checkbox v-model="row.earlyValid">日初</el-checkbox>
                                                <el-checkbox v-model="row.entrustValid">委托</el-checkbox>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="5" label="默认范围配置">
                                <div class="other-tab">
                                    <BoundCfg0
                                        :stockBound="boundCfg"
                                        :investGroupTypeDisabled="false"
                                        operateType="edit"
                                        operatePanelHeight="30vh"
                                        @onHandleOperateOver="onHandleOperateOver"
                                        v-if="true"
                                        :disabledSpliceMethods="true"
                                    />

                                    <!-- :investGroupType="investGroupType" -->
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="6" label="数据源维护">
                                <div class="other-tab other-tab6">
                                    <div class="other-tab other-tab6">
                                        <div class="other-tab6-hd">
                                            <span>数据源</span>
                                            <span>
                                                <el-tooltip
                                                    effect="dark"
                                                    content="必选1:关联表,关联表;必选2: 关联表,关联表|非必选1:关联表,关联表;非必选2;非必选3"
                                                    placement="top-start"
                                                >
                                                    <span>数据源表配置<i class="el-icon-info"></i></span>
                                                </el-tooltip>
                                            </span>
                                            <span>
                                                <el-tooltip effect="dark" content="表1;表2;表3|表B;表C" placement="top-start">
                                                    <span>互斥表配置<i class="el-icon-info"></i></span>
                                                </el-tooltip>
                                            </span>
                                        </div>
                                        <div class="other-tab6-item">
                                            <span>聚源表</span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['1'].sourceTable" size="mini" />
                                            </span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['1'].mutexTable" size="mini" />
                                            </span>
                                        </div>
                                        <div class="other-tab6-item">
                                            <span>恒生表</span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['2'].sourceTable" size="mini" />
                                            </span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['2'].mutexTable" size="mini" />
                                            </span>
                                        </div>
                                        <div class="other-tab6-item">
                                            <span>财汇表</span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['3'].sourceTable" size="mini" />
                                            </span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['3'].mutexTable" size="mini" />
                                            </span>
                                        </div>
                                        <div class="other-tab6-item">
                                            <span>万得表</span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['7'].sourceTable" size="mini" />
                                            </span>
                                            <span>
                                                <el-input style="width: 100%" v-model="dataCfg['7'].mutexTable" size="mini" />
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </el-col>
            <el-col :span="12" style="height: calc(100vh - 100px); overflow: auto">
                <div class="right">
                    <div class="right-title">范围说明：</div>
                    <div>
                        <el-input v-model="entryCalculateFactorExtra.factorDescription" size="mini" style="width: 100%" />
                    </div>
                    <div class="right-title">
                        <span>字段统计说明：</span>
                        <el-button
                            size="mini"
                            type="primary"
                            class="right-title-btn"
                            v-show="['edit', 'add'].includes(operateType)"
                            @click="generateColumnNames"
                        >
                            生成说明
                        </el-button>
                    </div>
                    <div class="right-instructions">
                        <el-tabs type="border-card" v-model="tabIndex">
                            <el-tab-pane name="ersqlColumnNames" label="日初字段说明">
                                <el-input type="textarea" v-model="factor.ersqlColumnNames" />
                            </el-tab-pane>
                            <el-tab-pane name="insqlColumnNames" label="日中字段说明">
                                <el-input type="textarea" v-model="factor.insqlColumnNames" />
                            </el-tab-pane>
                            <el-tab-pane name="stsqlColumnNames" label="静态字段说明">
                                <el-input type="textarea" v-model="factor.stsqlColumnNames" />
                            </el-tab-pane>
                            <el-tab-pane name="ensqlColumnNames" label="委托字段说明">
                                <el-input type="textarea" v-model="factor.ensqlColumnNames" />
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="right-title">
                        <span>实时计算逻辑：</span>
                        <el-button
                            size="mini"
                            type="primary"
                            class="right-title-btn"
                            v-show="['edit', 'add'].includes(operateType)"
                            @click="openMkdownData"
                        >
                            编辑
                        </el-button>
                    </div>
                    <div class="right-markdown">
                        <mavon-editor
                            :subfield="false"
                            default-open="preview"
                            :toolbarsFlag="false"
                            v-model="entryCalculateFactorExtra.calLogic"
                            style="width: 100%; height: 100%"
                        />
                        <yh-dialog drag title="编辑信息" :visible.sync="mkdownVisible" width="720px" :close-on-click-modal="false">
                            <mavon-editor
                                :subfield="true"
                                v-model="mkdownData"
                                style="width: 100%; height: 100%"
                                :toolbars="{
                                    readmodel: true,
                                    htmlcode: true, // 展示html源码
                                    subfield: true, // 单双栏模式
                                    preview: true, // 预览
                                }"
                            />
                            <div slot="footer" class="dialog-footer">
                                <el-button size="mini" @click="mkdownVisible = false"> 取 消 </el-button>
                                <el-button size="mini" type="primary" @click="mkdownOnSubmit"> 确 定 </el-button>
                            </div>
                        </yh-dialog>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div style="text-align: right; margin-right: 10px" v-show="['edit', 'add'].includes(operateType)">
            <el-button size="mini" @click="closeTab">取消</el-button>
            <el-button size="mini" type="primary" @click="onSubmit" v-loading="loading">确认</el-button>
        </div>
        <CalculateFactorInfoTrans
            @on-submit="boundOnsubmit"
            :visible.sync="boundVisible"
            :selected="boundRelationsList"
            :tableName="boundQueryTable"
        />
        <CalculateFactorInfoDiff :visible.sync="diffVisible" :diff-column-names="diffColumnNames" @on-submit="diffOnSubmit" />
    </div>
</template>

<script lang="ts">
import { mixins } from 'vue-class-component';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { addFactor, chekTableMemory, generateTableColumnNames, getFactorDetail, queryProdField, updateFactor, verifyShowSql } from '../api';
import DictionConstUtil from '@/utils/diction-const-util';
import CalculateFactorInfoTrans from '@/pages/quota/calculate-factor/calculate-factor-info/calculate-factor-info-trans.vue';
import CalculateFactorInfoDiff from '@/pages/quota/calculate-factor/calculate-factor-info-diff.vue';
import BoundCfg0 from '@/pages/baseparam/fund-group-setting/BoundCfg0.vue';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import { changeOptions } from '@/utils/tools';

@Component({ name: 'RangeIndicatorsInfo', components: { CalculateFactorInfoDiff, CalculateFactorInfoTrans, BoundCfg0 } })
export default class RangeIndicatorsInfo extends mixins(RiskEmitter) {
    @Prop({ required: true }) readonly operateType: string;
    @Prop({ required: true }) readonly code: string;

    private DictionConstUtil = DictionConstUtil;
    private common = {
        sqlCfg: ['instructionCalculateConfigText', 'entrustCalculateConfigText', 'staticCalculateConfigText', 'earlyCalculateConfigText'],
        relationCfg: [
            // 相关计算配置
            'relationFundConfigText', // 基金 - 指令
            'relationStockConfigText', // 证券 - 指令
            'relationBankConfigText', // 银行 - 指令
            'relationOpponentConfigText', // 交易对手 - 指令
            'relationPtStockConfigText', // 穿透证券 - 指令
            'relationPtBankConfigText', // 穿透银行 - 指令
            'relationDeriveConfigText', // 衍生品 - 指令

            'staticRelationFundConfigText', // 基金 - 静态
            'staticRelationStockConfigText', // 证券 - 静态
            'staticRelationBankConfigText', // 银行 - 静态
            'staticRelationOpponentConfigText', // 交易对手 - 静态
            'staticRelationPtStockConfigText', // 穿透证券 - 静态
            'staticRelationPtBankConfigText', // 穿透银行 - 静态
            'staticRelationDeriveConfigText', // 衍生品 - 静态
        ],
        reFormat: /^\w+;\w+$/g,
        cfgFormat: /^\w+;((\w+,)*\w+);\w+;(\w+,)*\w+$/g,
        dataCfgFormat: /^(((\w+)(:((\w+),)*\w+)*;)*(\w+)(:((\w+),)*\w+)*)*\|?((\w+)(:((\w+),)*\w+)*;)*(\w+)(:((\w+),)*\w+)*$/g,
        mutexFormat: /^((\w+;)*\w+\|)*((\w+;)*\w+)$/g,
        codeFormat: /^[a-zA-Z0-9]{3,10}$/g,
        exCfg: '[表名];[统计有利字段,统计不利字段];[主键];[其他字段1,其他字段2]',
        exRe: '[字段];[表名]',
    };

    private levelSymbolArr: any[] = ['0'];
    private levelSymbolSelectData: any[] = [
        { dictKey: '0', dictKeyName: '产品', option: ['0', '1', '2'] },
        { dictKey: '1', dictKeyName: '资产单元', option: ['3', '4', '5'] },
        { dictKey: '2', dictKeyName: '投资组合', option: ['6', '7', '8'] },
    ];
    private showLevelSymbol: boolean = true;

    async created() {
        this.boundRelationsAllList = (await DictionConstUtil.FNBoundCfg()) as any[];
        // this.boundRelationsList = [];
        if (this.operateType !== 'add') {
            const res = await getFactorDetail(this.code);
            // --- 基础信息
            // 因子编号
            this.factor.entryCalculateFactorCode = res.factor.entryCalculateFactorCode;
            // 因子名称
            this.factor.entryCalculateFactorName = res.factor.entryCalculateFactorName;
            // 作用范围
            this.factor.riskCalTypes = res.factor.riskCalTypes;
            this.handleRiskCalTypesChange('');

            // 风险类型
            this.factor.entryTypes = res.factor.entryTypes;
            // 项目标识
            this.factor.projectSymbol = res.factor.projectSymbol;
            // 变动类型
            this.factor.changeType = res.factor.changeType;
            // 计算单位
            this.factor.unit = res.factor.unit;
            // 额外补充
            this.factor.extraSqlConfig = res.factor.extraSqlConfig ? '1' : '0';

            // --- 其他配置
            // 相关计算配置
            // 基金
            if (res.factor.calculateRelationFund) {
                // relationCode, relationTable
                this.factor.calculateRelationFund = res.factor.calculateRelationFund ? '1' : '0';
                this.otherConfig.relationFundConfigText = this.handleRelationCfggParameter(res.factor.relationFundConfig);
                this.otherConfig.staticRelationFundConfigText = this.handleRelationCfggParameter(res.factor.staticRelationFundConfig);
            }
            // 证券
            if (res.factor.calculateRelationStock) {
                this.factor.calculateRelationStock = res.factor.calculateRelationStock ? '1' : '0';
                this.otherConfig.relationStockConfigText = this.handleRelationCfggParameter(res.factor.relationStockConfig);
                this.otherConfig.staticRelationStockConfigText = this.handleRelationCfggParameter(res.factor.staticRelationStockConfig);
            }

            // 银行
            if (res.factor.calculateRelationBank) {
                this.factor.calculateRelationBank = res.factor.calculateRelationBank ? '1' : '0';
                this.otherConfig.relationBankConfigText = this.handleRelationCfggParameter(res.factor.relationBankConfig);
                this.otherConfig.staticRelationBankConfigText = this.handleRelationCfggParameter(res.factor.staticRelationBankConfig);
            }

            // 交易对手
            if (res.factor.calculateRelationOpponent) {
                this.factor.calculateRelationOpponent = res.factor.calculateRelationOpponent ? '1' : '0';
                this.otherConfig.relationOpponentConfigText = this.handleRelationCfggParameter(res.factor.relationOpponentConfig);
                this.otherConfig.staticRelationOpponentConfigText = this.handleRelationCfggParameter(res.factor.staticRelationOpponentConfig);
            }

            // 穿透证券
            if (res.factor.calculateRelationPtStock) {
                this.factor.calculateRelationPtStock = res.factor.calculateRelationPtStock ? '1' : '0';
                this.otherConfig.relationPtStockConfigText = this.handleRelationCfggParameter(res.factor.relationPtStockConfig);
                this.otherConfig.staticRelationPtStockConfigText = this.handleRelationCfggParameter(res.factor.staticRelationPtStockConfig);
            }

            // 穿透银行
            if (res.factor.calculateRelationPtBank) {
                this.factor.calculateRelationPtBank = res.factor.calculateRelationPtBank ? '1' : '0';
                this.otherConfig.relationPtBankConfigText = this.handleRelationCfggParameter(res.factor.relationPtBankConfig);
                this.otherConfig.staticRelationPtBankConfigText = this.handleRelationCfggParameter(res.factor.staticRelationPtBankConfig);
            }

            // 衍生品
            if (res.factor.calculateRelationDerive) {
                this.factor.calculateRelationDerive = res.factor.calculateRelationDerive ? '1' : '0';
                this.otherConfig.relationDeriveConfigText = this.handleRelationCfggParameter(res.factor.relationDeriveConfig);
                this.otherConfig.staticRelationDeriveConfigText = this.handleRelationCfggParameter(res.factor.staticRelationDeriveConfig);
            }

            // 相关条目
            this.entry = res.entry;
            // 相关原始范围配置
            this.boundRelationsList = res.boundRelations.map(item => {
                let obj = this.boundRelationsAllList.find(ele => ele.boundCode == item.boundCode);
                item = {
                    ...item,
                    boundType: obj.boundType,
                    boundName: obj.boundName,
                };
                return item;
            });
            // this.boundRelationsList = this.boundRelationsAllList.filter(item => boundCodes.includes(item.boundCode));
            // 默认范围设置
            this.boundCfg = res.boundCfg;
            // 数据源维护
            const dataCfg = res.dataCfg;
            for (const dataCfgElement of dataCfg) {
                const dataType = dataCfgElement.dataType;
                const sourceTable = dataCfgElement.sourceTable;
                const mutexTable = dataCfgElement.mutexTable;
                this.dataCfg[dataType].sourceTable = sourceTable;
                this.dataCfg[dataType].mutexTable = mutexTable;
            }
            // 统计配置
            this.otherConfig.earlyCalculateConfigText = this.handleSqlCfgParameter(res.factor.earlyCalculateConfig);
            this.otherConfig.instructionCalculateConfigText = this.handleSqlCfgParameter(res.factor.instructionCalculateConfig);
            this.otherConfig.staticCalculateConfigText = this.handleSqlCfgParameter(res.factor.staticCalculateConfig);
            this.otherConfig.entrustCalculateConfigText = this.handleSqlCfgParameter(res.factor.entrustCalculateConfig);
            this.otherConfig.proceduresNameText = res.factor.proceduresName || '';

            // ------ 右边
            // 字段统计说明
            this.factor.ersqlColumnNames = res.factor.ersqlColumnNames || '';
            this.factor.insqlColumnNames = res.factor.insqlColumnNames || '';
            this.factor.stsqlColumnNames = res.factor.stsqlColumnNames || '';
            this.factor.ensqlColumnNames = res.factor.ensqlColumnNames || '';
            if (res.entryCalculateFactorExtra) {
                // 范围说明
                this.entryCalculateFactorExtra.factorDescription = res.entryCalculateFactorExtra.factorDescription;
                // 实时计算逻辑
                this.entryCalculateFactorExtra.calLogic = res.entryCalculateFactorExtra.calLogic;
            }
        }
    }

    // 左侧基础数据
    private entryTypesList = DictionConstUtil.PojoToList(DictionConstUtil.EntryType);
    private factor = {
        // 左侧基础数据
        // 因子编号
        entryCalculateFactorCode: '',
        // 因子名称
        entryCalculateFactorName: '',
        // 作用范围
        riskCalTypes: ['0', '1', '2'],
        levelSymbol: '0',
        // 风险类型
        entryTypes: ['0'],
        // 项目标识
        projectSymbol: '0',
        // 变动类型
        changeType: '1',
        // 计算单位
        unit: '',
        // 额外补充
        extraSqlConfig: '0',
        // 其他配置
        // 相关计算配置
        calculateRelationFund: '0', // 基金开关
        calculateRelationStock: '0', // 证券开关
        calculateRelationBank: '0', // 银行开关
        calculateRelationOpponent: '0', // 交易对手开关
        calculateRelationPtStock: '0', // 穿透证券开关
        calculateRelationPtBank: '0', // 穿透银行开关
        calculateRelationDerive: '0', // 衍生品开关

        relationFundConfig: null, // 基金 - 指令
        relationStockConfig: null, // 证券 - 指令
        relationBankConfig: null, // 银行 - 指令
        relationOpponentConfig: null, // 交易对手 - 指令
        relationPtStockConfig: null, // 穿透证券 - 指令
        relationPtBankConfig: null, // 穿透银行 - 指令
        relationDeriveConfig: null, // 衍生品 - 指令

        staticRelationFundConfig: null, // 基金 - 静态
        staticRelationStockConfig: null, // 证券 - 静态
        staticRelationBankConfig: null, // 银行 - 静态
        staticRelationOpponentConfig: null, // 交易对手 - 静态
        staticRelationPtStockConfig: null, // 穿透证券 - 静态
        staticRelationPtBankConfig: null, // 穿透银行 - 静态
        staticRelationDeriveConfig: null, // 衍生品 - 静态

        // 统计配置
        earlyCalculateConfig: null, // 日初统计配置
        instructionCalculateConfig: null, // 日中统计配置
        staticCalculateConfig: null, // 静态统计配置
        entrustCalculateConfig: null, // 委托统计配置
        proceduresName: null, // 关联存储过程

        // 右边 - 字段说明
        ersqlColumnNames: '', // 日初字段说明
        insqlColumnNames: '', // 日中字段说明
        stsqlColumnNames: '', // 静态字段说明
        ensqlColumnNames: '', // 委托字段说明
    };

    // 其他配置 - 相关原始范围配置
    private boundRelationsList = []; // 筛选的列表
    private boundRelationsAllList = []; // 全部列表
    private searchBoundRelations = '';
    // 其他数据 - 相关原始范围配置穿梭框数据
    private boundVisible = false;
    private boundQueryTable = '';

    // 其他配置 - 相关配置
    private entry = [];

    // 其他设置 - 默认范围设置
    private boundCfg = [];
    private actualBoundCfg: any[] = [];
    // private investGroupType = '3';

    // 数据源维护
    private dataCfg = {
        '1': {
            // 聚源表
            dataType: '1',
            sourceTable: '',
            mutexTable: '',
        },
        '2': {
            // 恒生表
            dataType: '2',
            sourceTable: '',
            mutexTable: '',
        },
        '3': {
            // 财汇表
            dataType: '3',
            sourceTable: '',
            mutexTable: '',
        },
        '7': {
            // 万得表
            dataType: '7',
            sourceTable: '',
            mutexTable: '',
        },
    };

    // 其他配置
    private otherConfig = {
        // 相关计算配置
        relationFundConfigText: '', // 基金 - 指令
        relationStockConfigText: '', // 证券 - 指令
        relationBankConfigText: '', // 银行 - 指令
        relationOpponentConfigText: '', // 交易对手 - 指令
        relationPtStockConfigText: '', // 穿透证券 - 指令
        relationPtBankConfigText: '', // 穿透银行 - 指令
        relationDeriveConfigText: '', // 衍生品-指令

        staticRelationFundConfigText: '', // 基金 - 静态
        staticRelationStockConfigText: '', // 证券 - 静态
        staticRelationBankConfigText: '', // 银行 - 静态
        staticRelationOpponentConfigText: '', // 交易对手 - 静态
        staticRelationPtStockConfigText: '', // 穿透证券 - 静态
        staticRelationPtBankConfigText: '', // 穿透银行 - 静态
        staticRelationDeriveConfigText: '', // 衍生品-静态

        // 统计配置
        earlyCalculateConfigText: '', // 日初统计配置
        instructionCalculateConfigText: '', // 日中统计配置
        staticCalculateConfigText: '', // 静态统计配置
        entrustCalculateConfigText: '', // 委托统计配置
        proceduresNameText: '', // 关联存储过程
    };

    // 默认数据
    private backup = {
        // 相关计算配置默认值
        fundCfg: 'C_FUND_CODE;TB_FUND',
        stockCfg: 'C_STOCK_CODE;TN_STOCK',
        bankCfg: 'C_BANK_CODE;TN_BANK',
        oppCfg: '',
        ptStockCfg: 'C_PT_STOCK_CODE;TN_STOCK',
        ptBankCfg: 'C_PT_BANK_CODE;TN_BANK',
        deriveCfg: 'C_STOCK_CODE;TN_STOCK',

        fundStaCfg: 'C_FUND_CODE;TB_SA_FUND',
        stockStaCfg: 'C_STOCK_CODE;TN_SA_STOCK',
        bankStaCfg: 'C_BANK_CODE;TN_SA_BANK',
        oppStaCfg: '',
        ptStockStaCfg: 'C_PT_STOCK_CODE;TN_SA_STOCK',
        ptBankStaCfg: 'C_PT_BANK_CODE;TN_SA_BANK',
        deriveStaCfg: 'C_STOCK_CODE;TN_SA_STOCK',
    };

    // 左边其他数据
    private otherTableIndex = '1';

    // 右边数据
    private tabIndex = 'ersqlColumnNames';
    private entryCalculateFactorExtra = {
        // 范围说明
        factorDescription: '',
        entryCalculateFactorCode: '',
        calLogic: '',

        ersqlColumnNames: '',
        insqlColumnNames: '',
        stsqlColumnNames: '',
        ensqlColumnNames: '',
    };

    // Markdown数据
    private mkdownVisible = false;
    private mkdownData = '';

    // 对比数据
    private diffVisible = false;
    private diffColumnNames = {
        ersqlColumnNames: [],
        insqlColumnNames: [],
        stsqlColumnNames: [],
        ensqlColumnNames: [],
    };
    private diffColumnNamesStr = {
        ersqlColumnNames: '',
        insqlColumnNames: '',
        stsqlColumnNames: '',
        ensqlColumnNames: '',
    };

    private loading = false;

    // 风险类型已选项前置
    get computedEntryTypesList() {
        let entryTypesList = changeOptions(this.factor.entryTypes, this.entryTypesList, 'dictKey');
        return entryTypesList;
    }

    isEmpty(obj) {
        return typeof obj == 'undefined' || obj == null || obj === '';
    }

    /**
     * 显示作用范围勾选面板
     */
    showRiskCalTypes() {
        this.showLevelSymbol = false;
    }

    /**
     * 作用范围勾选变化事件
     */
    handleRiskCalTypesChange(value) {
        this.levelSymbolArr = [];
        if (this.factor.riskCalTypes.includes('0') || this.factor.riskCalTypes.includes('1') || this.factor.riskCalTypes.includes('2')) {
            this.levelSymbolArr.push('0');
        }
        if (this.factor.riskCalTypes.includes('3') || this.factor.riskCalTypes.includes('4') || this.factor.riskCalTypes.includes('5')) {
            this.levelSymbolArr.push('1');
        }
        if (this.factor.riskCalTypes.includes('6') || this.factor.riskCalTypes.includes('7') || this.factor.riskCalTypes.includes('8')) {
            this.levelSymbolArr.push('2');
        }
        this.factor.levelSymbol = this.levelSymbolArr.join(',');
        console.log(this.levelSymbolArr, this.levelSymbolArr.join(','), 'llllllllllllll');
    }

    /**
     * 设置相关计算配置默认值
     * @param value
     * @param field 默认字段
     */
    handleRelatedComputedConf(value, field) {
        console.log('handleRelatedComputedConf');

        if (value === '1') {
            console.log('handleRelatedComputedConf-------------------1111');

            if (field === 'fundCfg') {
                this.otherConfig.relationFundConfigText = this.backup.fundCfg;
                this.otherConfig.staticRelationFundConfigText = this.backup.fundStaCfg;
            } else if (field === 'stockCfg') {
                this.otherConfig.relationStockConfigText = this.backup.stockCfg;
                this.otherConfig.staticRelationStockConfigText = this.backup.stockStaCfg;
            } else if (field === 'bankCfg') {
                this.otherConfig.relationBankConfigText = this.backup.bankCfg;
                this.otherConfig.staticRelationBankConfigText = this.backup.bankStaCfg;
            } else if (field === 'oppCfg') {
                this.otherConfig.relationOpponentConfigText = this.backup.oppCfg;
                this.otherConfig.staticRelationOpponentConfigText = this.backup.oppStaCfg;
            } else if (field === 'ptStockCfg') {
                this.otherConfig.relationPtStockConfigText = this.backup.ptStockCfg;
                this.otherConfig.staticRelationPtStockConfigText = this.backup.ptStockStaCfg;
            } else if (field === 'ptBankCfg') {
                this.otherConfig.relationPtBankConfigText = this.backup.ptBankCfg;
                this.otherConfig.staticRelationPtBankConfigText = this.backup.ptBankStaCfg;
            } else if (field === 'derive') {
                this.otherConfig.relationDeriveConfigText = this.backup.deriveCfg;
                this.otherConfig.staticRelationDeriveConfigText = this.backup.deriveStaCfg;
            }
        } else {
            console.log('handleRelatedComputedConf-------------------0000');

            if (field === 'fundCfg') {
                this.otherConfig.relationFundConfigText = '';
                this.otherConfig.staticRelationFundConfigText = '';
            } else if (field === 'stockCfg') {
                this.otherConfig.relationStockConfigText = '';
                this.otherConfig.staticRelationStockConfigText = '';
            } else if (field === 'bankCfg') {
                this.otherConfig.relationBankConfigText = '';
                this.otherConfig.staticRelationBankConfigText = '';
            } else if (field === 'oppCfg') {
                this.otherConfig.relationOpponentConfigText = '';
                this.otherConfig.staticRelationOpponentConfigText = '';
            } else if (field === 'ptStockCfg') {
                this.otherConfig.relationPtStockConfigText = '';
                this.otherConfig.staticRelationPtStockConfigText = '';
            } else if (field === 'ptBankCfg') {
                this.otherConfig.relationPtBankConfigText = '';
                this.otherConfig.staticRelationPtBankConfigText = '';
            } else if (field === 'derive') {
                this.otherConfig.relationDeriveConfigText = '';
                this.otherConfig.staticRelationDeriveConfigText = '';
            }
        }
    }

    get filterBoundRelationsList() {
        return this.boundRelationsList.filter(item => {
            let search = this.searchBoundRelations.trim().toLowerCase();
            return item.boundCode.toLowerCase().indexOf(search) > -1;
        });
    }

    /**
     * 相关计算配置数据处理 - data -> string
     */
    handleRelationCfggParameter(config) {
        if (this.isEmpty(config) || this.isEmpty(config.relationCode)) {
            return '';
        }
        return config.relationCode + ';' + config.relationTable;
    }
    /**
     * 相关计算配置数据处理 - string -> data
     */
    handleStringToRelationCfg(str) {
        if (this.isEmpty(str)) {
            return null;
        }
        let codes = str.split(';', -1);
        return { relationCode: codes[0], relationTable: codes[1] };
    }

    /* *******  校验统计配置sql start  ******* */

    checkStatisticalConfSql() {
        let otherConfig = this.otherConfig;
        if (
            !this.isEmpty(otherConfig.earlyCalculateConfigText) &&
            !this.isEmpty(otherConfig.instructionCalculateConfigText) &&
            !this.isEmpty(otherConfig.staticCalculateConfigText) &&
            !this.isEmpty(otherConfig.entrustCalculateConfigText)
        ) {
            this.yh_message_info('没有填写配置，无需校验');
            return false;
        }
        this.verifsql(otherConfig).then(res => {
            if (res.ersql !== '000000') {
                this.yh_message_error('日初sql 语句有问题!');
            } else if (res.insql !== '000000') {
                this.yh_message_error('日中sql 语句有问题!');
            } else if (res.stsql !== '000000') {
                this.yh_message_error('静态sql 语句有问题!');
            } else if (res.ensql !== '000000') {
                this.yh_message_error('委托sql 语句有问题!');
            } else {
                const tables = [];
                const needCheckProFields = [];
                // 日初
                if (!this.isEmpty(otherConfig.earlyCalculateConfigText)) {
                    tables.push(otherConfig.earlyCalculateConfigText.split(';')[0]);
                    otherConfig.earlyCalculateConfigText
                        .split(';')[1]
                        .split(',')
                        .forEach(item => {
                            needCheckProFields.push(item);
                        });
                }
                // 日中
                if (!this.isEmpty(otherConfig.instructionCalculateConfigText)) {
                    tables.push(otherConfig.instructionCalculateConfigText.split(';')[0]);
                    otherConfig.instructionCalculateConfigText
                        .split(';')[1]
                        .split(',')
                        .forEach(item => {
                            needCheckProFields.push(item);
                        });
                }
                // 静态
                if (!this.isEmpty(otherConfig.staticCalculateConfigText)) {
                    // tables.push(otherConfig.staticCalculateConfigText.split(';')[0]);
                    otherConfig.staticCalculateConfigText
                        .split(';')[1]
                        .split(',')
                        .forEach(item => {
                            needCheckProFields.push(item);
                        });
                }
                // 委托
                if (!this.isEmpty(otherConfig.entrustCalculateConfigText)) {
                    tables.push(otherConfig.entrustCalculateConfigText.split(';')[0]);
                    otherConfig.entrustCalculateConfigText
                        .split(';')[1]
                        .split(',')
                        .forEach(item => {
                            needCheckProFields.push(item);
                        });
                }

                this.chekTable(tables).then(tableList => {
                    if (tableList.length) {
                        this.yh_message_error('[' + tableList.join() + ']没有在内存表[TR_TABLE_MEMORY]里配置');
                    } else {
                        if (!this.isEmpty(otherConfig.proceduresNameText)) {
                            const proceduresName = otherConfig.proceduresNameText;

                            this.queryProdField(proceduresName, needCheckProFields).then(data => {
                                if (data.length) {
                                    this.yh_message_error('[' + data.join(',') + ']字段不在存储过程查询字段里面');
                                } else {
                                    this.yh_message_success('配置正常');
                                }
                            });
                        } else {
                            this.yh_message_success('配置正常');
                        }
                    }
                });
            }
        });
    }

    /**
     * 去后台验证sql是否能正确执行
     * earlyCalculateConfig \instructionCalculateConfig\staticCalculateConfig\entrustCalculateConfig
     * @param {*otherConfig} otherConfig
     */
    async verifsql(otherConfig) {
        let ersqlRst = '000000';
        let insqlRst = '000000';
        let stsqlRst = '000000';
        let ensqlRst = '000000';
        // 日初
        if (!this.isEmpty(otherConfig.earlyCalculateConfigText)) {
            let ersql = this.joinQuerySql(otherConfig.earlyCalculateConfigText);
            ersqlRst = await this.verifyWebsql(ersql);
        }
        // 日中
        if (!this.isEmpty(otherConfig.instructionCalculateConfigText)) {
            let insql = this.joinQuerySql(otherConfig.instructionCalculateConfigText);
            insqlRst = await this.verifyWebsql(insql);
        }
        // 静态
        if (!this.isEmpty(otherConfig.staticCalculateConfigText)) {
            let stsql = this.joinQuerySql(otherConfig.staticCalculateConfigText);
            stsqlRst = await this.verifyWebsql(stsql);
        }
        // 委托
        if (!this.isEmpty(otherConfig.entrustCalculateConfigText)) {
            let ensql = this.joinQuerySql(otherConfig.entrustCalculateConfigText);
            ensqlRst = await this.verifyWebsql(ensql);
        }
        return { ersql: ersqlRst, insql: insqlRst, stsql: stsqlRst, ensql: ensqlRst };
    }

    /**
     * 统计配置 - data 转 sql 进行校验
     * 解析'[表名];[统计有利字段,统计不利字段];[主键];[其他字段1,其他字段2]
     */
    joinQuerySql(cfg) {
        let fields = cfg.split(';', -1);
        return 'select ' + fields[1] + ',' + fields[2] + ',' + fields[3] + ' from ' + fields[0];
    }

    /**
     * 统计配置 - data 转 sql 输入框数据
     */
    handleSqlCfgParameter(config) {
        if (this.isEmpty(config) || this.isEmpty(config.calculateTable)) {
            return '';
        }
        // calculateTable; calculateStrictField, calculateWideField; calculateKey; calculateDetail
        let value = config.calculateTable + ';' + config.calculateStrictField;
        if (!this.isEmpty(config.calculateWideField)) {
            value = value + ',' + config.calculateWideField;
        }
        return value + ';' + config.calculateKey + ';' + config.calculateDetail.join(',');
    }

    /**
     * 统计配置 - sql输入框数据 转 data
     */
    handleStringToSqlCfg(value) {
        if (this.isEmpty(value)) {
            return null;
        }
        let codes = value.split(';', -1);
        // calculateTable;calculateStrictField,calculateWideField;calculateKey;calculateDetail
        let calculateFields = codes[1];
        let strictValid = false;
        let calculateFieldSplits = calculateFields.split(',', -1);
        if (calculateFieldSplits.length === 2) {
            strictValid = true;
        }
        let calculateWideField = strictValid ? calculateFieldSplits[1] : null;
        return {
            calculateTable: codes[0],
            calculateStrictField: calculateFieldSplits[0],
            calculateWideField: calculateWideField,
            strictValid: strictValid,
            calculateKey: codes[2],
            calculateDetail: codes[3].split(',', -1),
        };
    }

    /**
     * 去后台验证sql是否能正确执行
     * @param {*前端展示sql配置} websql
     */
    verifyWebsql(websql): Promise<any> {
        return new Promise((resolve, reject) => {
            verifyShowSql({ sql: websql })
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    /**
     * 检查内存表是否有配置
     */
    chekTable(tables): any {
        return new Promise((resolve, reject) => {
            chekTableMemory({ tables: tables })
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    /**
     * 验证计算字段是否存在存储过程里面
     */
    queryProdField(proceduresName, fields): any {
        return new Promise((resolve, reject) => {
            queryProdField({ proceduresName: proceduresName, fields: fields })
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    /* *******  校验统计配置sql end  ******* */

    /**
     * 编辑原始范围配置 - 检测打开
     */
    handleClickEditBound() {
        let queryTable = '';
        if (!this.checkForm()) {
            return false;
        }
        this.verifsql(this.otherConfig).then(res => {
            if (res.ersql !== '000000') {
                this.yh_message_error('日初sql 语句有问题!');
            } else if (res.insql !== '000000') {
                this.yh_message_error('日中sql 语句有问题!');
            } else if (res.stsql !== '000000') {
                this.yh_message_error('静态sql 语句有问题!');
            } else if (res.ensql !== '000000') {
                this.yh_message_error('委托sql 语句有问题!');
            } else {
                /* 作用范围只勾选了静态，则判断静态配置的表
                如果同时勾选了指令跟静态 则优先判断日中有没有配置，没有则判断日初 */
                const riskCalType0 = this.factor.riskCalTypes.includes('0');
                const riskCalType1 = this.factor.riskCalTypes.includes('1');
                if (riskCalType1) {
                    if (!this.isEmpty(this.otherConfig.instructionCalculateConfigText)) {
                        queryTable = this.otherConfig.instructionCalculateConfigText.split(';')[0];
                    } else if (!this.isEmpty(this.otherConfig.earlyCalculateConfigText)) {
                        queryTable = this.otherConfig.earlyCalculateConfigText.split(';')[0];
                    }
                } else if (riskCalType0 && !riskCalType1) {
                    if (!this.isEmpty(this.otherConfig.staticCalculateConfigText)) {
                        queryTable = this.otherConfig.staticCalculateConfigText.split(';')[0];
                    }
                }

                this.boundVisible = true;
                this.boundQueryTable = queryTable;
            }
        });
    }

    /**
     * 编辑原始范围配置 - 回调
     * @param list
     */
    boundOnsubmit(list: any[]) {
        let retList = list.map((item, index) => {
            // 本身已有部分
            let obj = this.boundRelationsList.find(ele => ele.boundCode == item.boundCode);
            if (obj) {
                return {
                    boundCode: obj.boundCode,
                    boundType: obj.boundType,
                    boundName: obj.boundName,
                    staticValid: obj.staticValid,
                    instValid: obj.instValid,
                    earlyValid: obj.earlyValid,
                    entrustValid: obj.entrustValid,
                };
            } else {
                return {
                    boundCode: item.boundCode,
                    boundType: item.boundType,
                    boundName: item.boundName,
                    staticValid: true,
                    instValid: true,
                    earlyValid: true,
                    entrustValid: true,
                };
            }
        });
        this.boundRelationsList = retList;
    }

    // 检查静态选项
    checkForm() {
        let riskCalType0 = this.factor.riskCalTypes.includes('0');
        let riskCalType3 = this.factor.riskCalTypes.includes('3');
        let riskCalType6 = this.factor.riskCalTypes.includes('6');
        let staticCalculateConfig = this.otherConfig.staticCalculateConfigText;

        if ((riskCalType0 || riskCalType3 || riskCalType6) && this.isEmpty(staticCalculateConfig)) {
            this.yh_message_error('作用范围勾选了静态，统计配置中静态统计配置不能为空');
            return false;
        }
        return true;
    }

    // 编辑器 - 打开
    openMkdownData() {
        this.mkdownVisible = true;
        this.mkdownData = this.entryCalculateFactorExtra.calLogic;
    }

    // 编辑器 - 提交
    mkdownOnSubmit() {
        this.entryCalculateFactorExtra.calLogic = this.mkdownData;
        this.mkdownVisible = false;
    }

    // 生成说明
    generateColumnNames() {
        let sqlCfgCheck = this.common.sqlCfg.every(item => {
            let cfgValue = this.otherConfig[item];
            let isEmp = this.isEmpty(cfgValue);
            if (!isEmp) {
                const reg = this.common.cfgFormat;
                const isRex = reg.test(cfgValue);
                reg.lastIndex = 0;
                if (!isRex) {
                    this.yh_message_error('统计配置规则有误,参考:' + this.common.exCfg);
                    return false;
                }
            }
            return true;
        });
        if (!sqlCfgCheck) {
            return false;
        }

        const data = {
            earlyCalculateConfig: this.otherConfig.earlyCalculateConfigText,
            instructionCalculateConfig: this.otherConfig.instructionCalculateConfigText,
            staticCalculateConfig: this.otherConfig.staticCalculateConfigText,
            entrustCalculateConfig: this.otherConfig.entrustCalculateConfigText,
        };
        // 生成最新的数据
        generateTableColumnNames(data).then(res => {
            let oldData = this.getOldColumnNames();
            let newData = this.getnewColumnNames(res || {});
            let result = this.compareColumnData(newData, oldData);
            this.diffColumnNamesStr = {
                ersqlColumnNames: res.ersqlColumnNames || '',
                insqlColumnNames: res.insqlColumnNames || '',
                stsqlColumnNames: res.stsqlColumnNames || '',
                ensqlColumnNames: res.ensqlColumnNames || '',
            };
            this.diffColumnNames = result;
            this.diffVisible = true;
        });
    }
    // 获取旧的字段统计说明
    getOldColumnNames() {
        // 获取数据字符串
        const dataStr = {
            ersqlColumnNames: this.factor.ersqlColumnNames,
            insqlColumnNames: this.factor.insqlColumnNames,
            stsqlColumnNames: this.factor.stsqlColumnNames,
            ensqlColumnNames: this.factor.ensqlColumnNames,
        };
        // 获取解析后的数据
        const data = {};
        for (let dataStrKey in dataStr) {
            data[dataStrKey] = this.parseColumnNames(dataStr[dataStrKey]);
        }
        return data;
    }
    // 获取新的字段统计说明
    getnewColumnNames(newValue) {
        // 获取数据字符串
        const dataStr = {
            ersqlColumnNames: newValue.ersqlColumnNames || '',
            insqlColumnNames: newValue.insqlColumnNames || '',
            stsqlColumnNames: newValue.stsqlColumnNames || '',
            ensqlColumnNames: newValue.ensqlColumnNames || '',
        };
        // 获取解析后的数据
        const data = {};
        for (let dataStrKey in dataStr) {
            data[dataStrKey] = this.parseColumnNames(dataStr[dataStrKey]);
        }
        return data;
    }
    // 对比新旧字段统计说明
    compareColumnData(newValue, oldValue) {
        let column = ['ersqlColumnNames', 'insqlColumnNames', 'stsqlColumnNames', 'ensqlColumnNames'];
        let temp = { type: '', key: '', oldValue: '', newValue: '' };
        // 对比结果
        const diff = {
            ersqlColumnNames: [],
            insqlColumnNames: [],
            stsqlColumnNames: [],
            ensqlColumnNames: [],
        };
        // 循环四个输入框的数据
        column.forEach(columnNames => {
            // 每一项对应每一个输入框
            let newItem = newValue[columnNames];
            let oldItem = oldValue[columnNames];
            // 获取所有键
            let fields = [];
            Object.assign(fields, Object.getOwnPropertyNames(newItem), Object.getOwnPropertyNames(oldItem));
            // 循环数据，对比每一条字段
            for (let field of fields) {
                // console.log(columnNames, field, newItem[field], oldItem[field]);
                let newField = (newItem[field] || '').trim();
                let oldfield = (oldItem[field] || '').trim();
                if (newField && oldfield && newField !== oldfield) {
                    // 修改
                    diff[columnNames].push({ type: 'edit', key: field, oldValue: oldfield, newValue: newField, sort: 2 });
                } else if (newField && !oldfield) {
                    // 新增
                    diff[columnNames].push({ type: 'add', key: field, oldValue: oldfield, newValue: newField, sort: 1 });
                } else if (!newField && oldfield) {
                    // 删除
                    diff[columnNames].push({ type: 'del', key: field, oldValue: oldfield, newValue: newField, sort: 3 });
                }
            }
            diff[columnNames].sort((a, b) => a.sort - b.sort);
        });
        return diff;
    }
    // 解析字段
    parseColumnNames(str) {
        if (!str || !str.trim()) {
            return {};
        }
        // 获取每一行数据
        let rows = str.trim().split('\n');
        let data = {};
        rows.forEach(rowStr => {
            let row = rowStr.split(':');
            let key = row[0];
            let value = row[1];
            if (key) {
                data[key] = value || '';
                data[key] = data[key].trim();
            }
        });
        return data;
    }
    // 字段统计说明提交后赋值
    diffOnSubmit() {
        this.factor.ersqlColumnNames = this.diffColumnNamesStr.ersqlColumnNames;
        this.factor.insqlColumnNames = this.diffColumnNamesStr.insqlColumnNames;
        this.factor.stsqlColumnNames = this.diffColumnNamesStr.stsqlColumnNames;
        this.factor.ensqlColumnNames = this.diffColumnNamesStr.ensqlColumnNames;
    }

    // 提交数据
    onSubmit() {
        if (this.verifyItemDetailParam()) {
            if (!this.checkForm()) {
                // 检查静态选项
                return false;
            }
            this.verifsql(this.otherConfig).then(res => {
                if (res.ersql !== '000000') {
                    this.yh_message_error('日初sql 语句有问题!');
                } else if (res.insql !== '000000') {
                    this.yh_message_error('日中sql 语句有问题!');
                } else if (res.stsql !== '000000') {
                    this.yh_message_error('静态sql 语句有问题!');
                } else if (res.ensql !== '000000') {
                    this.yh_message_error('委托sql 语句有问题!');
                } else {
                    // 提交操作
                    this.loading = true;
                    const data = this.processData();
                    if (this.operateType === 'edit') {
                        updateFactor(data)
                            .then(res => {
                                this.yh_message_success('计算因子修改成功');
                                this.closeTab();
                            })
                            .finally(() => {
                                this.loading = false;
                            });
                    } else if (this.operateType === 'add') {
                        for (let j = 0; j < data.boundCfg.length; j++) {
                            if (data.boundCfg[j].boundGroupValid === true) {
                                let isFund = data.boundCfg.find(item => {
                                    return String(item.parentId) === String(data.boundCfg[j].configId);
                                });
                                if (!isFund) {
                                    this.yh_message_warn('未配置范围属性的值 ');
                                    return;
                                }
                            }
                        }

                        addFactor(data)
                            .then(res => {
                                this.yh_message_success('计算因子添加成功');
                                this.closeTab();
                            })
                            .finally(() => {
                                this.loading = false;
                            });
                    }
                }
            });
        }
    }

    // 提交前处理数据
    processData() {
        // 基础数据 - factor
        const baseData = {
            entryCalculateFactorCode: this.factor.entryCalculateFactorCode, // 因子编码
            entryCalculateFactorName: this.factor.entryCalculateFactorName, // 因子名称
            riskCalTypes: this.factor.riskCalTypes, // 作用范围
            entryTypes: this.factor.entryTypes, // 风险类型
            projectSymbol: this.factor.projectSymbol, // 项目标识
            changeType: this.factor.changeType, // 变动类型
            unit: this.factor.unit, // 计算单位
            extraSqlConfig: this.factor.extraSqlConfig, // 额外补充
            levelSymbol: this.factor.levelSymbol,
        };
        // 相关计算配置 - factor
        const factorCalc = {
            // 相关计算配置 - 开关
            calculateRelationFund: this.factor.calculateRelationFund, // 基金开关
            calculateRelationStock: this.factor.calculateRelationStock, // 证券开关
            calculateRelationBank: this.factor.calculateRelationBank, // 银行开关
            calculateRelationOpponent: this.factor.calculateRelationOpponent, // 交易对手开关
            calculateRelationPtStock: this.factor.calculateRelationPtStock, // 穿透证券开关
            calculateRelationPtBank: this.factor.calculateRelationPtBank, // 穿透银行开关
            calculateRelationDerive: this.factor.calculateRelationDerive, // 衍生品开关
            // 相关计算配置 - 指令
            relationFundConfig: this.handleStringToRelationCfg(this.otherConfig.relationFundConfigText), // 基金 - 指令
            relationStockConfig: this.handleStringToRelationCfg(this.otherConfig.relationStockConfigText), // 证券 - 指令
            relationBankConfig: this.handleStringToRelationCfg(this.otherConfig.relationBankConfigText), // 银行 - 指令
            relationOpponentConfig: this.handleStringToRelationCfg(this.otherConfig.relationOpponentConfigText), // 交易对手 - 指令
            relationPtStockConfig: this.handleStringToRelationCfg(this.otherConfig.relationPtStockConfigText), // 穿透证券 - 指令
            relationPtBankConfig: this.handleStringToRelationCfg(this.otherConfig.relationPtBankConfigText), // 穿透银行 - 指令
            relationDeriveConfig: this.handleStringToRelationCfg(this.otherConfig.relationDeriveConfigText), // 衍生品 - 指令

            // 相关计算配置 - 静态
            staticRelationFundConfig: this.handleStringToRelationCfg(this.otherConfig.staticRelationFundConfigText), // 基金 - 静态
            staticRelationStockConfig: this.handleStringToRelationCfg(this.otherConfig.staticRelationStockConfigText), // 证券 - 静态
            staticRelationBankConfig: this.handleStringToRelationCfg(this.otherConfig.staticRelationBankConfigText), // 银行 - 静态
            staticRelationOpponentConfig: this.handleStringToRelationCfg(this.otherConfig.staticRelationOpponentConfigText), // 交易对手 - 静态
            staticRelationPtStockConfig: this.handleStringToRelationCfg(this.otherConfig.staticRelationPtStockConfigText), // 穿透证券 - 静态
            staticRelationPtBankConfig: this.handleStringToRelationCfg(this.otherConfig.staticRelationPtBankConfigText), // 穿透银行 - 静态
            staticRelationDeriveConfig: this.handleStringToRelationCfg(this.otherConfig.staticRelationDeriveConfigText), // 穿透银行 - 静态

            // staticRelationFundConfig: this.handleStringToRelationCfg(this.otherConfig.relationFundConfigText), // 基金 - 静态
            // staticRelationStockConfig: this.handleStringToRelationCfg(this.otherConfig.relationStockConfigText), // 证券 - 静态
            // staticRelationBankConfig: this.handleStringToRelationCfg(this.otherConfig.relationBankConfigText), // 银行 - 静态
            // staticRelationOpponentConfig: this.handleStringToRelationCfg(this.otherConfig.relationOpponentConfigText), // 交易对手 - 静态
            // staticRelationPtStockConfig: this.handleStringToRelationCfg(this.otherConfig.relationPtStockConfigText), // 穿透证券 - 静态
            // staticRelationPtBankConfig: this.handleStringToRelationCfg(this.otherConfig.relationPtBankConfigText), // 穿透银行 - 静态
        };
        // 统计配置
        const factorCount = {
            earlyCalculateConfig: this.handleStringToSqlCfg(this.otherConfig.earlyCalculateConfigText), // 日初统计配置
            instructionCalculateConfig: this.handleStringToSqlCfg(this.otherConfig.instructionCalculateConfigText), // 日中统计配置
            staticCalculateConfig: this.handleStringToSqlCfg(this.otherConfig.staticCalculateConfigText), // 静态统计配置
            entrustCalculateConfig: this.handleStringToSqlCfg(this.otherConfig.entrustCalculateConfigText), // 委托统计配置
            proceduresName: this.otherConfig.proceduresNameText, // 关联存储过程
        };
        // 相关原始范围配置 - boundRelations
        // const boundRelations = this.boundRelationsList.map(item => item.boundCode);
        const boundRelations = this.boundRelationsList;
        // 默认范围配置 - boundCfg
        const boundCfg = this.actualBoundCfg || [];
        // 数据源维护 - dataCfg
        let dataCfg = [];
        for (let dataCfgKey in this.dataCfg) {
            const item = this.dataCfg[dataCfgKey];
            dataCfg.push(item);
        }
        dataCfg = dataCfg.sort((a, b) => a.dataType - b.dataType).filter(item => item.mutexTable && item.sourceTable);
        // 范围说明, 实时计算逻辑
        const entryCalculateFactorExtra = {
            calLogic: this.entryCalculateFactorExtra.calLogic,
            factorDescription: this.entryCalculateFactorExtra.factorDescription,
        };
        // 字段统计说明
        const factorColumnNames = {
            // 日初字段说明
            ersqlColumnNames: this.factor.ersqlColumnNames,
            // 日中字段说明
            insqlColumnNames: this.factor.insqlColumnNames,
            // 静态字段说明
            stsqlColumnNames: this.factor.stsqlColumnNames,
            // 委托字段说明
            ensqlColumnNames: this.factor.ensqlColumnNames,
        };
        const data = {
            boundRelations,
            boundCfg,
            dataCfg,
            entryCalculateFactorExtra,
            factor: {
                ...baseData,
                ...factorCalc,
                ...factorCount,
                ...factorColumnNames,
            },
        };
        return data;
    }

    // 校验所填参数是否正确
    verifyItemDetailParam() {
        let result = 'SUCCESS';

        // 基础信息 - 因子编号
        let reValue = this.factor.entryCalculateFactorCode;
        let isEmp = this.isEmpty(reValue);
        if (!isEmp) {
            // let reg = this.common.codeFormat;
            let reg = /^[a-zA-Z0-9]{3,10}$/g;
            let isRex = reg.test(reValue);
            if (!isRex) {
                result = '因子编号[A-Za-z0-9]{3,10}规则有误!';
                this.yh_message_error(result);
                return false;
            }
        }

        // 基础信息-  计算因子名称
        if (!this.handleVerifyParam(this.factor.entryCalculateFactorName, '计算因子名称', 100)) {
            result = 'error';
            return false;
        }

        // 基础信息 - 作用范围
        if (!this.factor.riskCalTypes.length) {
            result = '作用范围不能为空';
            this.yh_message_error(result);
            return false;
        }

        // 基础信息 - 风险类型
        if (!this.factor.entryTypes.length) {
            result = '风险类型不能为空';
            this.yh_message_error(result);
            return false;
        }

        // 基础信息 - 计量单位
        if (!this.handleVerifyParam(this.factor.unit, '计算单位', 10)) {
            result = 'error';
            return false;
        }

        // 相关计算配置校验 - 基金
        if (
            !this.handleVerifyRelation(
                '基金',
                this.factor.calculateRelationFund,
                this.otherConfig.relationFundConfigText,
                this.otherConfig.staticRelationFundConfigText
            )
        ) {
            result = 'error';
            return false;
        }
        // 相关计算配置校验 - 基金
        if (
            !this.handleVerifyRelation(
                '证券',
                this.factor.calculateRelationStock,
                this.otherConfig.relationStockConfigText,
                this.otherConfig.staticRelationStockConfigText
            )
        ) {
            result = 'error';
            return false;
        }
        // 相关计算配置校验 - 银行
        if (
            !this.handleVerifyRelation(
                '银行',
                this.factor.calculateRelationBank,
                this.otherConfig.relationBankConfigText,
                this.otherConfig.staticRelationBankConfigText
            )
        ) {
            result = 'error';
            return false;
        }
        // 相关计算配置校验 - 交易对手
        if (
            !this.handleVerifyRelation(
                '交易对手',
                this.factor.calculateRelationOpponent,
                this.otherConfig.relationOpponentConfigText,
                this.otherConfig.staticRelationOpponentConfigText
            )
        ) {
            result = 'error';
            return false;
        }
        // 相关计算配置校验 - 穿透证券
        if (
            !this.handleVerifyRelation(
                '穿透证券',
                this.factor.calculateRelationPtStock,
                this.otherConfig.relationPtStockConfigText,
                this.otherConfig.staticRelationPtStockConfigText
            )
        ) {
            result = 'error';
            return false;
        }
        // 相关计算配置校验 - 穿透银行
        if (
            !this.handleVerifyRelation(
                '穿透银行',
                this.factor.calculateRelationPtBank,
                this.otherConfig.relationPtBankConfigText,
                this.otherConfig.staticRelationPtBankConfigText
            )
        ) {
            result = 'error';
            return false;
        }

        // 相关计算配置校验 - 衍生品
        if (
            !this.handleVerifyRelation(
                '衍生品',
                this.factor.calculateRelationDerive,
                this.otherConfig.relationDeriveConfigText,
                this.otherConfig.staticRelationDeriveConfigText
            )
        ) {
            result = 'error';
            return false;
        }

        // 相关计算配置校验格式
        let cfgCheck = this.common.relationCfg.every(item => {
            let reValue = this.otherConfig[item];
            let isEmp = this.isEmpty(reValue);
            if (!isEmp) {
                let reg = this.common.reFormat;
                let isRex = reg.test(reValue);
                reg.lastIndex = 0;
                if (!isRex) {
                    result = '相关计算配置规则有误,参考:' + this.common.exRe;
                    this.yh_message_error(result);
                    return false;
                }
            }
            return true;
        });
        if (!cfgCheck) {
            return false;
        }

        // 统计配置校验
        let sqlCfgCheck = this.common.sqlCfg.every(item => {
            let cfgValue = this.otherConfig[item];
            let isEmp = this.isEmpty(cfgValue);
            if (!isEmp) {
                let reg = this.common.cfgFormat;
                let isRex = reg.test(cfgValue);
                reg.lastIndex = 0;
                if (!isRex) {
                    result = '统计配置规则有误,参考:' + this.common.exCfg;
                    this.yh_message_error(result);
                    return false;
                }
            }
            return true;
        });
        if (!sqlCfgCheck) {
            return false;
        }

        if (result === 'SUCCESS') {
            return true;
        }
    }

    /**
     * 验证字符串字段
     * @param name 字符串数据
     * @param desc 提示信息
     * @param length 长度
     */
    handleVerifyParam(name, desc, length?: any) {
        let result = '';
        if (!name) {
            result = desc + '不能为空';
            this.yh_message_error(result);
            return false;
        } else {
            if (!length) {
                return true;
            }
            // eslint-disable-next-line no-control-regex
            let strLength = name.replace(/[^\x00-\xff]/g, '01').length;
            if (strLength > length) {
                result = desc + '太长，不能超过' + length + '个字符长度';
                this.yh_message_error(result);
                return false;
            }
        }
        return true;
    }

    /**
     * 验证相关计算配置
     * @param investType
     * @param isRelation
     * @param config
     * @param staticConfig
     */
    handleVerifyRelation(investType, isRelation, config, staticConfig) {
        if (isRelation === '1') {
            if (this.factor.riskCalTypes.includes('1')) {
                if (!this.handleVerifyParam(config, investType + '指令配置')) {
                    return false;
                }
            }
            if (this.factor.riskCalTypes.includes('0')) {
                if (!this.handleVerifyParam(staticConfig, investType + '静态配置')) {
                    return false;
                }
            }
        }
        return true;
    }
    // 关闭当前标签
    closeTab() {
        let typeName = '';
        switch (this.operateType) {
            case 'look':
                typeName = '查看' + this.code;
                break;
            case 'edit':
                typeName = '编辑' + this.code;
                break;
            case 'add':
                typeName = '新增指标';
                break;
            default:
                break;
        }
        this.dispatch('CalculateFactor', 'handleTags', {
            type: 'delete',
            name: typeName,
        });
    }

    /**
     * 动态维度范围回调
     */
    onHandleOperateOver(value) {
        // this.boundCfg = value || [];
        this.actualBoundCfg = value || [];
    }
}
</script>

<style lang="scss" scoped>
// .calculate-factor-info {
//     //overflow: auto;
// }

.calculate-factor-info /deep/ {
    .left {
        border-bottom: 1px solid #cacaca;
        padding: 5px;
    }

    .left {
        .left-base {
            padding: 5px 0;
            border-bottom: 1px solid #e8e8e8;
        }

        .left-baseinfo {
            padding: 5px 0;
            display: flex;
            flex-wrap: wrap;
            max-height: 165px;
            overflow: auto;

            .left-baseinfo-item {
                display: flex;
                flex-wrap: nowrap;
                width: 50%;
                padding: 5px;
                white-space: nowrap;
                overflow: hidden;

                .left-baseinfo-item-label {
                    line-height: 1.8;
                    width: 66px;
                }

                .left-baseinfo-item-input {
                    width: calc(100% - 66px);

                    .el-select__tags {
                        overflow: hidden;
                        flex-wrap: nowrap;
                    }
                }
                .check-box {
                    border: 1px solid #d7d7d7;
                    border-radius: 5px;
                    padding: 5px;
                    .el-icon-arrow-up {
                        float: right;
                        margin-top: 25px;
                        cursor: pointer;
                    }
                }
                .el-checkbox__label {
                    padding-left: 5px !important;
                }
                .levelSymbol-select {
                    .el-tag__close {
                        display: none;
                    }
                }
            }
        }
    }

    .other {
        border-bottom: 1px solid #cacaca;
        padding: 5px;
    }

    .other {
        .other-title {
            padding: 5px 0;
            border-bottom: 1px solid #e8e8e8;
        }

        .other-tab {
            overflow: auto;
            height: calc(100vh - 420px);
        }

        .other-tab1 {
            .other-tab1-hd,
            .other-tab1-item {
                margin-bottom: 5px;
            }

            .other-tab1-hd {
                display: flex;
                flex-wrap: nowrap;

                & > span {
                    text-align: center;
                    font-weight: bold;
                    white-space: nowrap;

                    &:nth-child(1) {
                        width: 70px;
                        flex-shrink: 0;
                    }
                    &:nth-child(2) {
                        width: 80px;
                        flex-shrink: 0;
                    }
                    &:nth-child(3) {
                        flex-grow: 1;
                    }
                    &:nth-child(4) {
                        flex-grow: 1;
                    }
                }
            }

            .other-tab1-item {
                display: flex;
                flex-wrap: nowrap;

                & > span {
                    white-space: nowrap;

                    &:nth-child(1) {
                        width: 70px;
                        flex-shrink: 0;
                    }
                    &:nth-child(2) {
                        width: 80px;
                        flex-shrink: 0;
                    }
                    &:nth-child(3) {
                        flex-grow: 1;
                    }
                    &:nth-child(4) {
                        flex-grow: 1;
                    }
                }
            }
        }

        .other-tab2 {
            .other-tab2-hd,
            .other-tab2-item {
                display: flex;
                margin-bottom: 10px;

                .other-tab2-hd-label,
                .other-tab2-item-label {
                    width: 110px;
                    flex-shrink: 0;
                }

                .other-tab2-hd-input,
                .other-tab2-item-input {
                    flex-grow: 1;
                }

                .other-tab2-item-label {
                    line-height: 54px;
                }
            }
        }

        .other-tab4 {
            .el-checkbox {
                margin-right: 8px !important;
            }
            .el-checkbox__label {
                padding-left: 5px !important;
            }
        }

        .other-tab6 {
            .other-tab6-hd,
            .other-tab6-item {
                margin-bottom: 5px;
            }

            .other-tab6-hd {
                display: flex;
                flex-wrap: nowrap;

                & > span {
                    text-align: center;
                    font-weight: bold;
                    white-space: nowrap;

                    &:nth-child(1) {
                        width: 70px;
                        flex-shrink: 0;
                    }
                    &:nth-child(2) {
                        flex-grow: 2;
                    }
                    &:nth-child(3) {
                        flex-grow: 1;
                    }
                }
            }

            .other-tab6-item {
                display: flex;
                flex-wrap: nowrap;

                & > span {
                    white-space: nowrap;

                    &:nth-child(1) {
                        width: 70px;
                        flex-shrink: 0;
                    }
                    &:nth-child(2) {
                        flex-grow: 2;
                    }
                    &:nth-child(3) {
                        flex-grow: 1;
                    }
                }
            }
        }
    }

    .right {
        border-bottom: 1px solid #cacaca;
        padding: 5px;
    }

    .right {
        .right-title {
            padding: 5px 0;
            display: flex;
            justify-content: space-between;
            //border-bottom: 1px solid #e8e8e8;

            .right-title-btn {
                padding-top: 4px;
                padding-bottom: 4px;
            }
        }

        .right-instructions {
            textarea {
                height: 150px !important;
            }
        }

        .right-markdown {
            height: calc(100vh - 460px);
            border: 1px solid #c5c6c7;
            overflow: auto;

            .el-dialog__body {
                height: 500px;
                max-height: none;
            }
        }
    }
}
</style>
